<div class="left">
    <div class="roleby-frame-header">
        <!-- <div class="float-left ">
            <h3>用户名:</h3>
        </div> -->
        <!-- <div class="float-left ">
            <input type="text" class="form-control">
        </div> -->
        <!-- <div class="float-left">
            <button class="btn  btn-primary">
                <span class="glyphicon glyphicon-search"></span>检索
            </button>
        </div> -->
        <div class="input-group pull-right search-width" style="width: 100%;">
            <input class="form-control search-input" style="border: 1px solid #9CACB2;" placeholder="请输入用户名称搜索" type="text" (input)="changesearch()" (keyup.enter)="changesearch()" [(ngModel)]="searchData.queryCriteria">
            <button class="btn btn-search btn-blue" style="margin-right: 0px !important;" (click)="search()"mat-button>查询</button>
       </div> 
    </div>
    <!--测试代码 <pre>{{selected|json}}</pre>-->
    <!--测试代码 <pre>{{selectedTags|json}}</pre>-->
    <div class="table-header" >
        <table class="table table-bordered user-roleby-table ">
            <thead>
                <tr>
                    <td class="wh50 text-center">
                        <!-- <input type="checkbox" #event (click)="selectAll(event.checked, rolebyUserData)" [checked]="isSelectAll"> -->
                        <input type="checkbox" (click)="selectAll()" [checked]="selectedItems?.length == rolebyUserData?.length && selectedItems?.length !=0">
                    </td>
                    <td class=" text-center">用户名</td>
                </tr>
            </thead>
        </table>
    </div>
    <div class="table-body wrapper">
        <table class="table table-bordered  user-roleby-table table-striped">
            <tbody *ngIf="rolebyUserData" [dragula]='"another-bag"' [dragulaModel]='rolebyUserData'>
                <tr *ngFor="let val of rolebyUserData; let  i = index;" [ngClass]="{'active':i%2!=0}" (dblclick)="doublechange(val.userId,val.userName)">
                    <td class="wh50">
                        <!-- <input type="checkbox" #event (click)="chose(event.checked, val.userId,val.userName, val.length)" [checked]="isChose"> -->
                        <input type="checkbox" #need 
                        [checked]="isSelected(val.userId)"
                        [value]="val.userId"
                        (click)="getSysVal(val.userId,val.userName)" >
                    </td>
                    <td class="text-center max-w" title="{{val.userName}}">{{val.userName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="info-bottom">
        <app-pagination [getTotalItems]="totalItems" (isLoadTableFromPagination)="isLoadTableFromPaginationHandler($event)"></app-pagination>
    </div>
  </div>
